<template>
	<div class="common-layout">
	    <el-container>
			<el-header><Header></Header></el-header>
			<el-main>
				<h3>基础设置</h3>
				<el-form-item label="是否启用" label-width="150px" style="margin: 10px 0;">
				    <el-radio-group v-model="confSelect" @change="handleRadioChange">
				        <el-radio :value="1">是</el-radio>
				        <el-radio :value="0">否</el-radio>
				    </el-radio-group>
				</el-form-item>
				<el-form-item label="渠道代理等级" label-width="150px" style="margin: 10px 0;">
					<el-button  @click="addAgentLevelFn" plain type="primary" v-if='counter.btnsObj.addFlag'>
						{{counter.btnsObj.addName}}
					</el-button>
					<el-table style="width: 100%;margin-top: 15px;" :data="agentLevelData" ref="multipleTableRef" height="50vh">
						<el-table-column prop="levelName" label="等级名称"/>
						<el-table-column prop="levelCost" label="等级费用"/>
						<el-table-column prop="levelDiscount" label="等级折扣"/>
						<el-table-column label="操作">
							<template #default="record">
								<a style="cursor: pointer;margin:5px;" @click="update(record.row)" class="mya">编辑</a>
								<a style="cursor: pointer;margin-left: 10px;" @click="deletelevel(record.row)"  class="mya">删除</a>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination
						layout="prev,pager,next"
						:page-count="total"
						:page-size="pageSize"
						v-model:current-page="pageIndex"	
						@current-change="changePage"
					></el-pagination>
				</el-form-item>
			</el-main>
	    </el-container>
	</div>
	<!-- 添加等级 -->
	<el-dialog
		v-model="dialogVisible"
	    title="添加等级"
	    width="500"
		align-center
		>
		<el-form :model="addForm" label-width="auto" style="max-width: 700px">
			<el-form-item label="等级名称"   label-width="100px">
				<el-input v-model="addForm.levelName" placeholder="请输入等级名称" style="width: 300px;"/>
			</el-form-item>
			<el-form-item label="等级费用"   label-width="100px">
				<div>
					<el-input
					      v-model.number="addForm.levelCost"
					      style="width: 300px;"
					      placeholder="请输入等级费用"
					    >
						<template #append>元</template>
					</el-input>
					<p style="color: #939393;">等级费用指代理商申请的费用，目前代理申请线下处理，系统只做记录</p>
				</div>
			</el-form-item>
			<el-form-item label="等级折扣" required label-width="100px">
				<div>
					<el-input
					      v-model.number="addForm.levelDiscount"
					      style="width: 300px;"
					      placeholder="请输入等级折扣"
					    >
						<template #append>折</template>
					</el-input>
					<p style="color: #939393;">折扣数据0-10折</p>
				</div>
			</el-form-item>
		</el-form>
	    <template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogVisible=false">取消</el-button>
				<el-button type="primary" @click="addLevel">
					确定
				</el-button>
			</div>
	    </template>
	</el-dialog>
	<!-- 编辑等级 -->
	<el-dialog
		v-model="dialogVisible2"
	    title="编辑等级"
	    width="500"
		align-center
		>
		<el-form :model="addForm" label-width="auto" style="max-width: 700px">
			<el-form-item label="等级名称" required label-width="100px">
				<el-input v-model="updateForm.levelName" placeholder="请输入等级名称" style="width: 300px;"/>
			</el-form-item>
			<el-form-item label="等级费用" required label-width="100px">
				<div>
					<el-input
					      v-model.number="updateForm.levelCost"
					      style="width: 300px;"
					      placeholder="请输入等级费用"
					    >
						<template #append>元</template>
					</el-input>
					<p style="color: #939393;">等级费用指代理商申请的费用，目前代理申请线下处理，系统只做记录</p>
				</div>
			</el-form-item>
			<el-form-item label="等级折扣" required label-width="100px">
				<div>
					<el-input
					      v-model.number="updateForm.levelDiscount"
					      style="width: 300px;"
					      placeholder="请输入等级折扣"
					    >
						<template #append>折</template>
					</el-input>
					<p style="color: #939393;">折扣数据0-10折</p>
				</div>
			</el-form-item>
		</el-form>
	    <template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogVisible2 = false">取消</el-button>
				<el-button type="primary" @click="updateLevel">
					确定
				</el-button>
			</div>
	    </template>
	</el-dialog>
	
	<el-dialog v-model="dialogFormVisible3" title="提示" width="500">
	    <el-form>
			<p style="text-align: center;">确认删除该代理等级吗?</p>
	    </el-form>
		<template #footer>
		  <div class="dialog-footer">
		    <el-button @click="dialogFormVisible3 = false">取消</el-button>
		    <el-button type="primary" @click="delsure">
		      确定
		    </el-button>
		  </div>
		</template>
	</el-dialog>
	
</template>

<script setup>
	import Header from "@/components/Header.vue"
	import { onMounted, ref, reactive} from 'vue';
	import { useRouter,useRoute } from 'vue-router';
	import {useCounterStore} from '../stores/counter';
	import {IfOpen,AgentLevelList,AddAgentLevel,DelAgentLevel,UpdateAgentLevel} from "@/api"
	import { ElMessage, ElMessageBox } from 'element-plus'
		
	let route=useRoute();
	let router=useRouter();
	let counter=useCounterStore();
	counter.btns=route.meta.btns
	let pageIndex=ref(1);
	let pageSize=5;
	let total=ref(0)
	// 代理等级列表
	let agentLevelData=ref([])
	const agentLevelList=async()=>{
		let res = await AgentLevelList({
			siteId:1,
			pageSize:pageSize,
			pageIndex:pageIndex.value
		})
		// console.log("代理等级列表",res)
		total.value=res.pageCount
		agentLevelData.value=res.list
	}
	
	// 添加等级
	let addForm=reactive({
		siteId:1,
		levelName:"",
		levelDiscount:"",
		levelCost:""
	})
	const dialogVisible = ref(false)
	const addAgentLevelFn=()=>{
		dialogVisible.value=true

	}
	
	// 添加确认
	const addLevel=async()=>{
		let res = await AddAgentLevel(addForm)
		// console.log("添加",res)
		if(typeof(res)=="object"){
			ElMessage({
				message:"添加成功",
				type:"success"
			})
		}
		dialogVisible.value=false
		agentLevelList()
	}
	
	// 编辑等级
	let updateForm=reactive({
		siteId:1,
		levelName:"",
		levelDiscount:"",
		levelCost:""
	})
	const dialogVisible2 = ref(false)
	const update=(cont)=>{
		dialogVisible2.value=true
		Object.assign(updateForm,cont)
		// console.log("cont",cont)
	}
	
	// 编辑确认
	const updateLevel=async()=>{
		let res = await UpdateAgentLevel(updateForm)
		// console.log("编辑",res)
		dialogVisible2.value=false
		ElMessage.success("编辑成功")
		agentLevelList()
	}
	
	//删除代理等级
	let dialogFormVisible3=ref(false)
	const deletelevel=(row)=>{
		dialogFormVisible3.value=true
		sessionStorage.setItem("proxysLevelId",row.proxysLevelId)
		// console.log("11213123",row);
	}
	const delsure=async()=>{
		let res=await DelAgentLevel({
			proxysLevelId:Number(sessionStorage.getItem("proxysLevelId"))
		})
		// console.log("删除代理等级",res);
		dialogFormVisible3.value=false
		if(typeof(res)=="object"){
			ElMessage({
				message:"删除成功",
				type:"success"
			})
		}
		agentLevelList()
	}
	let confSelect=ref(0)
	const handleRadioChange=()=>{
		// console.log("改变了")
	}
	const changePage=(page)=>{
		pageIndex.value=page;
		agentLevelList()
	}
	
	onMounted(()=>{
		agentLevelList()
	})
</script>

<style scoped lang="less">
	:deep(.el-table .el-table__cell){
	    text-align: center !important;
	}
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}
	.mya{
		color: #4b5db9;
		margin:0 4px;
	}
</style>